// 全屏下的布点图查看
.logo{
    cursor: pointer;
}
#map-view-container{
    display: none;
    z-index: 900;
    &.fullscreen{
        position: fixed;
        display: block;
        left: 0;
        top:0;
        bottom: 0;
        right: 0;
    }
    #type-container{
        width: 235px;
        background-color: #3d3d3d;
        position: absolute;
        left:0;
        top:0;
        bottom: 0;
        color:rgb(189,189,189);
        .logo{
            background-color: #1F1F1F;
            display: block;
            width: 235px;
            height: 46px;
            padding-left: 20px;
            padding-right: 20px;
            img{
                margin: 16px 0 0;
            }
        }
        ul{
            list-style: none;
            margin: 0;
            padding: 0;
            li{
                display: block;
                margin: 0;
                padding: 0;
                border: 0;
            }
        }
        .type-wrapper{
            margin-top:20px;
            .nav-item{
                display: flex;
                align-items: center;
                .nav-link{
                    padding: 15px;
                    flex:1;
                    color:#ddd;
                    &.active{
                        background-color: #D64635;
                        color:#fff;
                    }
                }
                i{
                    width: 30px;
                    text-align: center;
                }
            }

        }
    }
    #map-container{
        flex-direction: column;
        background-color: #f7f7f7;
        display: flex;
        position: fixed;
        left:235px;
        top:0;
        right: 0;
        bottom: 0;
        .title{
            height: 46px;
            line-height:46px;
            
            background-color: #f1f1f1;
            border-bottom: 1px solid #ddd;
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            .header{
                flex:1;
                padding-left:10px;
                font-size:14px;
                font-weight:300;
            }
            .actions{
                margin-left:auto;
                display: flex;
                align-items: center;
                text-align: center;
                transition: background-color .1s linear;
                &:hover{
                    background-color: #E81123;
                    color:#fff;
                }
                i {
                    width:50px;
                }
            }
        }
        #json-map{
            flex:1;
            background-color: #f7f7f7;
        }
    }
}
#map-portlet{
    display: none;
    flex-direction: column;
    background-color: #f7f7f7;
    &.portlet-fullscreen{
        display: flex;
        height: auto;
        z-index:800;
        left:235px;
        width:auto;
    }
    .portlet-body{
        position: relative;
        flex:1;
    }

}

.div-label {
    white-space: nowrap;
    margin-left: -10px;
    margin-top: -10px;
    font-size: 10px;
    color: #444;
}

.point-marker-txt {
    width: 10px;
    margin-left: -5px;
    margin-top: -5px;
    font-size: 0.7rem;
    color: #333;
}

.point-marker {
    -webkit-transition: width 0.4s ease-out, height 0.4s ease-out, box-shadow 0.2s ease-out;
    -moz-transition: width 0.4s ease-out, height 0.4s ease-out, box-shadow 0.2s ease-out;
    transition: width 0.4s ease-out, height 0.4s ease-out, box-shadow 0.2s ease-out;
    border-radius: 10em !important;
    width: 14px;
    height: 14px;
    margin-left: -8px;
    margin-top: -8px;
    opacity: 0.8;
    border: 1px solid #555;
    animation: shine 0.6s linear 2 alternate;
    -webkit-animation: shine 0.6s linear 2 alternate;
}

.point-marker-normal.point-marker-active {
    box-shadow: 0 0 5px 5px #31a354;
    border: 1px solid #666;
    /*-webkit-animation: normal-shine 1.6s linear infinite;*/
}

.point-marker-alert.point-marker-active {
    box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.8);
    border: 2px solid #cc0000;
    /*-webkit-animation: alert-shine 1.6s linear infinite;*/
}

.point-marker-normal {
    background: #31a354;
}

.point-marker-normal:hover {
    background-color: #4BC971;
    box-shadow: 0 0 5px 5px #31a354;
}

.point-marker-alert {
    background: rgba(255, 0, 0, 0.8);
}

.point-marker-alert:hover {
    background: #FF3C3C;
    box-shadow: 0 0 5px 5px rgba(255, 0, 0, 0.8);
}

.map-zoom-0 {
    width: 3px !important;
    height: 3px !important;
    margin-left: -2px !important;
    margin-top: -2px !important;
    font-size: 5px;
}

.map-zoom-1 {
    width: 7px !important;
    height: 7px !important;
    margin-left: -4px !important;
    margin-top: -4.5px !important;
    font-size: 7px;
}

.map-zoom-2 {
    width: 11px !important;
    height: 11px !important;
    margin-left: -6px !important;
    margin-top: -6px !important;
    font-size: 10px;
}

.map-zoom-3 {
    width: 14px !important;
    height: 14px !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    font-size: 10px;
}

@-webkit-keyframes normal-shine {
    0% {
        box-shadow: 0 0 0 0;
    }
    60% {
        box-shadow: 0 0 4px 4px #31a354;
    }
    100% {
        box-shadow: 0 0 0 0;
    }
}

@-webkit-keyframes alert-shine {
    0% {
        box-shadow: 0 0 0 0;
    }
    60% {
        box-shadow: 0 0 4px 4px rgba(255, 0, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 0 0;
    }
}

@keyframes shine {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

@-moz-keyframes shine {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes shine {
    0% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
    }
}
.point-popup-table {
  color: #ddd;
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
}
.point-popup-table tr > td {
  padding: 12px;
  white-space: nowrap;
}
.point-popup-table tr:first-child {
  border: none;
}
.point-popup-table tr {
  border-top: 1px solid #444;
}